<template>
	<view class="container">
		<view class="navbar">
			<view class="navbar-back" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="navbar-title">预约摄影师</view>
			<view style="width: 24px;"></view>
		</view>
		
		<!-- 摄影师信息 -->
		<view class="photographer-info">
			<image :src="photographerInfo.avatar" mode="aspectFill" class="photographer-avatar"></image>
			<view class="photographer-detail">
				<view class="photographer-name">{{photographerInfo.name}}</view>
				<view class="photographer-rating">
					<text class="iconfont icon-star"></text>
					<text>{{photographerInfo.rating}} ({{photographerInfo.reviewCount}})</text>
				</view>
			</view>
		</view>
		
		<!-- 预约表单 -->
		<view class="booking-form">
			<!-- 预约日期和时间 -->
			<view class="form-section">
				<view class="section-title">选择预约日期</view>
				<view class="section-subtitle">请选择您希望的拍摄日期和时间</view>
				
				<!-- 日期选择器 -->
				<scroll-view scroll-x class="date-selector">
					<view 
						class="date-item" 
						v-for="(date, index) in availableDates" 
						:key="index" 
						:class="{ active: selectedDate === index }"
						@click="selectDate(index)"
					>
						<view class="date-day">{{date.day}}</view>
						<view class="date-weekday">{{date.weekday}}</view>
					</view>
				</scroll-view>
				
				<!-- 时间选择器 -->
				<view class="section-title">选择时间段</view>
				<view class="time-slots">
					<view 
						class="time-slot" 
						v-for="(time, index) in availableTimes" 
						:key="index"
						:class="{ 
							active: selectedTime === index,
							disabled: time.disabled
						}"
						@click="selectTime(index, time.disabled)"
					>
						{{time.text}}
					</view>
				</view>
			</view>
			
			<!-- 服务套餐选择 -->
			<view class="form-section">
				<view class="section-title">选择服务套餐</view>
				<view class="package-options">
					<view 
						class="package-option" 
						v-for="(pkg, index) in packages" 
						:key="index"
						:class="{ active: selectedPackage === index }"
						@click="selectPackage(index)"
					>
						<view class="package-option-radio"></view>
						<view class="package-info">
							<view class="package-name">{{pkg.name}}</view>
							<view class="package-features">
								<text v-for="(feature, fIndex) in pkg.features" :key="fIndex">
									{{feature}}
									<text v-if="fIndex !== pkg.features.length - 1"> · </text>
								</text>
							</view>
						</view>
						<view class="package-price">¥{{pkg.price}}</view>
					</view>
				</view>
			</view>
			
			<!-- 拍摄地点 -->
			<view class="form-section">
				<view class="section-title">拍摄地点</view>
				<view class="location-options">
					<view 
						class="location-option" 
						v-for="(location, index) in locations" 
						:key="index"
						:class="{ active: selectedLocation === index }"
						@click="selectLocation(index)"
					>
						<view class="location-option-radio"></view>
						<view class="location-info">
							<view class="location-name">{{location.name}}</view>
							<view class="location-desc" v-if="location.desc">{{location.desc}}</view>
						</view>
						<view class="location-fee" v-if="location.fee">+¥{{location.fee}}</view>
					</view>
				</view>
			</view>
			
			<!-- 联系信息 -->
			<view class="form-section">
				<view class="section-title">联系信息</view>
				<view class="input-group">
					<view class="input-label">姓名</view>
					<input type="text" class="input" v-model="contactInfo.name" placeholder="请输入您的姓名" />
				</view>
				<view class="input-group">
					<view class="input-label">手机号</view>
					<input type="number" class="input" v-model="contactInfo.phone" placeholder="请输入您的手机号" />
				</view>
				<view class="input-group">
					<view class="input-label">备注</view>
					<textarea class="textarea" v-model="contactInfo.remark" placeholder="有什么特殊需求请在这里备注（选填）" />
				</view>
			</view>
		</view>
		
		<!-- 价格摘要 -->
		<view class="price-summary">
			<view class="price-item">
				<view>套餐费用</view>
				<view>¥{{currentPackage.price}}</view>
			</view>
			<view class="price-item" v-if="currentLocation.fee">
				<view>外景费用</view>
				<view>¥{{currentLocation.fee}}</view>
			</view>
			<view class="price-total">
				<view>合计</view>
				<view class="total-amount">¥{{totalPrice}}</view>
			</view>
		</view>
		
		<!-- 底部提交按钮 -->
		<view class="bottom-bar">
			<view class="price-display">
				<view class="price-label">合计</view>
				<view class="price-value">¥{{totalPrice}}</view>
			</view>
			<button class="submit-btn" @click="submitOrder" :disabled="!isFormValid">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const today = new Date();
			const dates = [];
			
			for (let i = 0; i < 10; i++) {
				const date = new Date(today);
				date.setDate(today.getDate() + i);
				
				const day = date.getDate();
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const weekday = weekdays[date.getDay()];
				
				dates.push({
					day: day,
					weekday: weekday,
					date: date
				});
			}
			
			return {
				photographerId: null,
				packageId: null,
				selectedDate: 0,
				selectedTime: null,
				selectedPackage: 0,
				selectedLocation: 0,
				availableDates: dates,
				availableTimes: [
					{ text: '09:00', disabled: false },
					{ text: '10:00', disabled: false },
					{ text: '11:00', disabled: false },
					{ text: '13:00', disabled: false },
					{ text: '14:00', disabled: false },
					{ text: '15:00', disabled: true },
					{ text: '16:00', disabled: false },
					{ text: '17:00', disabled: false },
					{ text: '18:00', disabled: false }
				],
				packages: [
					{
						name: '基础套餐',
						price: 199,
						features: [
							'1小时拍摄',
							'1套服装',
							'5张精修照片',
							'电子版照片'
						]
					},
					{
						name: '高级套餐',
						price: 299,
						features: [
							'2小时拍摄',
							'2套服装',
							'15张精修照片',
							'电子版照片'
						]
					},
					{
						name: '豪华套餐',
						price: 499,
						features: [
							'3小时拍摄',
							'3套服装',
							'30张精修照片',
							'电子版照片+精美相册'
						]
					}
				],
				locations: [
					{
						name: '摄影棚拍摄',
						desc: '摄影师提供专业摄影棚',
						fee: 0
					},
					{
						name: '指定外景',
						desc: '您可以选择特定地点进行拍摄',
						fee: 100
					},
					{
						name: '上门拍摄',
						desc: '摄影师到您指定地点拍摄',
						fee: 150
					}
				],
				contactInfo: {
					name: '',
					phone: '',
					remark: ''
				},
				photographerInfo: {
					id: 1,
					name: '王摄影工作室',
					avatar: 'https://img.freepik.com/free-photo/side-view-woman-taking-photos_23-2149915463.jpg',
					rating: 4.9,
					reviewCount: 254
				}
			}
		},
		computed: {
			currentPackage() {
				return this.packages[this.selectedPackage];
			},
			currentLocation() {
				return this.locations[this.selectedLocation];
			},
			totalPrice() {
				return this.currentPackage.price + (this.currentLocation.fee || 0);
			},
			isFormValid() {
				return this.selectedTime !== null && 
					this.contactInfo.name.trim() !== '' && 
					this.contactInfo.phone.trim() !== '';
			}
		},
		onLoad(options) {
			if (options.id) {
				this.photographerId = options.id;
				this.loadPhotographerInfo();
			}
			
			if (options.package) {
				const packageIndex = parseInt(options.package);
				if (!isNaN(packageIndex) && packageIndex >= 0 && packageIndex < this.packages.length) {
					this.selectedPackage = packageIndex;
				}
			}
		},
		methods: {
			// 加载摄影师信息
			loadPhotographerInfo() {
				// 实际应用中应该发送请求获取摄影师信息
				console.log('加载摄影师信息，ID:', this.photographerId);
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 选择日期
			selectDate(index) {
				this.selectedDate = index;
				// 在实际应用中，这里应该根据选择的日期更新可用时间段
			},
			
			// 选择时间
			selectTime(index, isDisabled) {
				if (isDisabled) return;
				this.selectedTime = index;
			},
			
			// 选择套餐
			selectPackage(index) {
				this.selectedPackage = index;
			},
			
			// 选择地点
			selectLocation(index) {
				this.selectedLocation = index;
			},
			
			// 提交订单
			submitOrder() {
				if (!this.isFormValid) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				
				// 构建订单数据
				const orderData = {
					photographerId: this.photographerId,
					packageId: this.selectedPackage,
					date: this.availableDates[this.selectedDate].date,
					time: this.availableTimes[this.selectedTime].text,
					location: this.locations[this.selectedLocation].name,
					contactName: this.contactInfo.name,
					contactPhone: this.contactInfo.phone,
					remark: this.contactInfo.remark,
					totalPrice: this.totalPrice
				};
				
				console.log('提交订单:', orderData);
				
				// 模拟提交订单
				uni.showLoading({
					title: '提交中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showModal({
						title: '预约成功',
						content: `您已成功预约${this.photographerInfo.name}，拍摄时间为${this.availableDates[this.selectedDate].date.toLocaleDateString()} ${this.availableTimes[this.selectedTime].text}`,
						showCancel: false,
						success: () => {
							uni.redirectTo({
								url: '/pages/my_orders/my_orders'
							});
						}
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-width: 100%;
		padding: 0;
		overflow-x: hidden;
		padding-bottom: 80px;
	}
	
	/* 导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		background-color: white;
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 0 15px;
		border-bottom: 1px solid $border-color;
		/* #ifdef MP-WEIXIN */
		padding-top: var(--status-bar-height);
		height: calc(44px + var(--status-bar-height));
		/* #endif */
	}
	
	.navbar-title {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		flex: 1;
	}
	
	.navbar-back {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
	}
	
	/* 摄影师信息 */
	.photographer-info {
		display: flex;
		align-items: center;
		padding: 15px;
		background-color: white;
		border-bottom: 1px solid $border-color;
	}
	
	.photographer-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}
	
	.photographer-name {
		font-weight: 500;
		font-size: 16px;
		margin-bottom: 3px;
	}
	
	.photographer-rating {
		font-size: 13px;
		color: $light-text;
		display: flex;
		align-items: center;
	}
	
	.photographer-rating .iconfont {
		color: #ffc300;
		margin-right: 3px;
	}
	
	/* 预约表单 */
	.booking-form {
		background-color: white;
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
	
	.form-section {
		padding: 15px;
		border-bottom: 1px solid $border-color;
	}
	
	.form-section:last-child {
		border-bottom: none;
	}
	
	.section-title {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 10px;
	}
	
	.section-subtitle {
		font-size: 13px;
		color: $light-text;
		margin-bottom: 15px;
	}
	
	/* 日期选择器 */
	.date-selector {
		display: flex;
		white-space: nowrap;
		margin: 0 -5px 15px;
		padding: 0 5px;
	}
	
	.date-item {
		display: inline-block;
		min-width: 60px;
		text-align: center;
		padding: 8px 0;
		border-radius: 6px;
		border: 1px solid $border-color;
		margin-right: 10px;
	}
	
	.date-item.active {
		background-color: $primary-color;
		color: white;
		border-color: $primary-color;
	}
	
	.date-day {
		font-size: 16px;
		font-weight: 500;
	}
	
	.date-weekday {
		font-size: 12px;
		color: $light-text;
	}
	
	.date-item.active .date-weekday {
		color: white;
	}
	
	/* 时间选择器 */
	.time-slots {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	
	.time-slot {
		padding: 8px 0;
		text-align: center;
		border-radius: 6px;
		border: 1px solid $border-color;
		font-size: 14px;
	}
	
	.time-slot.active {
		background-color: $primary-color;
		color: white;
		border-color: $primary-color;
	}
	
	.time-slot.disabled {
		background-color: #f5f5f5;
		color: #ccc;
	}
	
	/* 套餐选择 */
	.package-options {
		margin-bottom: 10px;
	}
	
	.package-option {
		display: flex;
		align-items: center;
		padding: 12px;
		border: 1px solid $border-color;
		border-radius: 8px;
		margin-bottom: 10px;
		position: relative;
	}
	
	.package-option.active {
		border-color: $primary-color;
		background-color: rgba(7, 193, 96, 0.05);
	}
	
	.package-option-radio {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid $border-color;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}
	
	.package-option.active .package-option-radio {
		border-color: $primary-color;
		background-color: $primary-color;
		position: relative;
	}
	
	.package-option.active .package-option-radio::after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: white;
		position: absolute;
	}
	
	.package-info {
		flex: 1;
	}
	
	.package-name {
		font-weight: 500;
		margin-bottom: 3px;
	}
	
	.package-features {
		font-size: 12px;
		color: $light-text;
	}
	
	.package-price {
		font-weight: 500;
		color: $primary-color;
	}
	
	/* 地点选择 */
	.location-options {
		margin-bottom: 10px;
	}
	
	.location-option {
		display: flex;
		align-items: center;
		padding: 12px;
		border: 1px solid $border-color;
		border-radius: 8px;
		margin-bottom: 10px;
	}
	
	.location-option.active {
		border-color: $primary-color;
		background-color: rgba(7, 193, 96, 0.05);
	}
	
	.location-option-radio {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid $border-color;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}
	
	.location-option.active .location-option-radio {
		border-color: $primary-color;
		background-color: $primary-color;
		position: relative;
	}
	
	.location-option.active .location-option-radio::after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: white;
		position: absolute;
	}
	
	.location-info {
		flex: 1;
	}
	
	.location-name {
		font-weight: 500;
		margin-bottom: 3px;
	}
	
	.location-desc {
		font-size: 12px;
		color: $light-text;
	}
	
	.location-fee {
		font-weight: 500;
		color: $primary-color;
	}
	
	/* 表单输入 */
	.input-group {
		margin-bottom: 15px;
	}
	
	.input-label {
		font-size: 14px;
		margin-bottom: 5px;
	}
	
	.input {
		width: 100%;
		height: 40px;
		border: 1px solid $border-color;
		border-radius: 6px;
		padding: 0 12px;
		box-sizing: border-box;
		font-size: 14px;
	}
	
	.textarea {
		width: 100%;
		height: 80px;
		border: 1px solid $border-color;
		border-radius: 6px;
		padding: 8px 12px;
		box-sizing: border-box;
		font-size: 14px;
	}
	
	/* 价格摘要 */
	.price-summary {
		background-color: white;
		margin: 10px;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
	
	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
	}
	
	.price-total {
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
		border-top: 1px dashed $border-color;
		font-weight: 500;
	}
	
	.total-amount {
		color: $primary-color;
		font-size: 18px;
	}
	
	/* 底部提交栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background-color: white;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		padding: 0 15px;
		z-index: 1000;
	}
	
	.price-display {
		flex: 1;
	}
	
	.price-label {
		font-size: 12px;
		color: $light-text;
	}
	
	.price-value {
		font-size: 18px;
		font-weight: 500;
		color: $primary-color;
	}
	
	.submit-btn {
		width: 120px;
		height: 40px;
		background-color: $primary-color;
		color: white;
		border-radius: 20px;
		font-size: 15px;
		font-weight: 500;
		border: none;
	}
	
	.submit-btn[disabled] {
		background-color: #ccc;
		cursor: not-allowed;
	}
	
	/* iconfont */
	.icon-back:before {
		content: "\e679";
	}
	
	.icon-star:before {
		content: "\e62d";
	}
</style> 